<template>
  <div class="app-container">
    <div class="container-fluid">
      <div class="filter-container">
        <el-input v-model="listQuery.keyword" placeholder="Keyword" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>
        <router-link :to="link" style="float: right;" v-if="userType.indexOf('ADMIN')>-1">
          <button type="button" class="el-button el-button--success"><span>Add</span></button>
        </router-link>
      </div>
      <el-table v-loading="listLoading" :data="list.list" element-loading-text="Loading" border fit highlight-current-row stripe @sort-change="sort_change">
        <el-table-column label="Sport" prop="sportName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.sportName }}
          </template>
        </el-table-column>
        <el-table-column label="Name" prop="lastName" sortable="custom">
          <template slot-scope="scope">
            <router-link  tag="a" target="_blank" :to="'/athletes/generalInformation?id=' + scope.row.id + ''">
              {{ scope.row.lastName }}
              {{ scope.row.firstName }}
            </router-link>
           <!-- <span v-else>{{ scope.row.lastName }}{{ scope.row.firstName }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="中文名稱" prop="tcName" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.tcName }}
          </template>
        </el-table-column>
        <el-table-column label="Gender" prop="gender" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.gender}}
          </template>
        </el-table-column>
        <el-table-column label="Contact No." min-width="120" prop="contactNo" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.contactNo }}
          </template>
        </el-table-column>
        <el-table-column label="Email" prop="email" sortable="custom">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="" width="90" v-if="userType.indexOf('ADMIN')>-1">
          <template slot-scope="scope">
            <div style="text-align: center;">

              <router-link :to="'/setting/edit?member=' + scope.row.member + ''">
                <el-button type="text" size="small">
                  <img src="../../assets/images/edit.svg" class="btn-icon">
                </el-button>
              </router-link>
<!--              <router-link tag="a" target="_blank" :to="'/athletes/generalInformation?id=' + scope.row.id + ''">-->
<!--                <el-button type="text" size="small">-->
<!--                  <img src="../../assets/images/look.svg" class="btn-icon">-->
<!--                </el-button>-->
<!--              </router-link>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="sizes, prev, pager, next"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="list.total"
        :page-sizes="[25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination-container"
      />
    </div>
  </div>
</template>

<script>
  import { getUserList } from '@/api/setting'
  import store from '@/store'
  import { getAthletesList } from '@/api/athletes'
  import { resetRouter } from '@/router'

  export default {
    data() {
      return {
        list: {
          list: []
        },
        listLoading: true,
        link: `/setting/edit?type=ATHLETE`,
        listQuery: {
          page: 1,
          limit: 25,
          keyword: '',
          sorting: '',
          column: '',
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        userType: store.getters.userType
      }
    },
    created() {
      if (global.athletesUser && global.athletesUser.listQuery) {
        this.listQuery = global.athletesUser.listQuery || this.listQuery
        this.list = global.athletesUser.list || this.list
      }
      this.fetchData()
    },
    methods: {
      // pageSize变化事件
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.fetchData()
      },
      // pageNum变化事件
      handleCurrentChange(page) {
        this.listQuery.page = page
        this.fetchData()
      },
      fetchData() {
        console.log('column', {
          page: this.listQuery.page,
          size: this.listQuery.limit,
          keyword: this.listQuery.keyword,
          sorting: this.listQuery.sorting,
          column: this.listQuery.column
        })
        getAthletesList({
          page: this.listQuery.page,
          size: this.listQuery.limit,
          keyword: this.listQuery.keyword,
          sorting: this.listQuery.sorting,
          column: this.listQuery.column
        }).then(response => {
          const data = response.result
          if (!data.total && data.total === undefined) {
            data.total = this.list.total
          }
          this.list = data
          this.listLoading = false
        })
      },
      sort_change(column) {
        this.listQuery.page = 1
        if (column.prop && column.order) {
          this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
          this.listQuery.column = column.prop
          this.fetchData(1)
        }
        // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
      },
      handleFilter() {
        this.fetchData()
      }
    },
    beforeRouteLeave(to, from, next) {
      if (to.name === 'User') {
        global.athletesUser = {
          listQuery: this.listQuery,
          list: this.list
        }
      } else {
        global.athletesUser = ''
      }
      next()
    }
  }
</script>
